<template>
  <!-- 基本信息 -->
  <div>
    <el-form ref="form" :inline="true" :model="form" label-width="150px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="活动名称" prop="activity_name">
            <el-input v-model="form.activity_name" maxlength="10" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="选择日期" width="236">
            <el-date-picker
              v-model="dates"
              :disabled="disabled1"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item>
            <el-radio v-model="form.is_end" label="0" :disabled="disabled">长期活动</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="bg_image_ids" label="背景图片上传">
            <newUpload ref="uploadImg1" :file-num="4" :file-list="fileList1" :size-number="2" />
            <p class="pclass">
              <span class="spanclass">背景长图</span>
              <span class="spanclass">分享框内标题</span>
              <span class="spanclass">邀请记录标题</span>
              <span class="spanclass">规则说明标题</span>
            </p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="res_image_ids" label="领取结果海报">
            <newUpload ref="uploadImg2" :file-num="1" :file-list="fileList2" :size-number="2" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="规则编辑" prop="rule_text">
            <Tinymce v-model="form.rule_text" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="安卓、IOS链接" prop="weex_links">
            <el-input v-model="form.weex_links" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="小程序链接" prop="mini_links">
            <el-input v-model="form.mini_links" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否开启邀请人分销" prop="is_distribute">
            <el-switch v-model="form.is_distribute" :active-value="1" :inactive-value="0" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="金币奖励">
            <el-input v-model="form.distribute_gold_num" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银币奖励">
            <el-input v-model="form.distribute_silver_num" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <!-- <el-button type="primary" @click="handleNext">下一页</el-button> -->
            <el-button type="primary" @click="handleSubmit('form')">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { basicInfo, getInfo } from '@/api/invitationMange'
import newUpload from '@/components/imgUpload/shopImgUp'
import Tinymce from '@/components/NewTinymce'
export default {
  components: { newUpload, Tinymce },
  // props: ["title"],
  props: {
    title: String,
    propid: String,
    firstForms: Object
  },
  data() {
    // 购买须知
    const rules = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入购买须知'))
      } else {
        return callback()
      }
    }
    return {
      form: {
        activity_name: null,
        rule_text: '',
        weex_links: '',
        mini_links: '',
        is_end: '',
        start_time: '',
        end_time: '',
        bg_image_ids: [],
        res_image_ids: [],
        is_distribute: 0,
        distribute_gold_num: 0,
        distribute_silver_num: 0
      }, // 基本信息配置
      basicId: '',
      disabled: false,
      disabled1: false,
      dates: null,
      fileList: [], // 规则图片
      fileList1: [], // 背景图片
      fileList2: [], // 领取结果海报
      rules: {
        activity_name: [
          {
            required: true,
            message: '请填写活动名称',
            trigger: 'blur'
          }
        ],
        bg_image_ids: [
          {
            required: true,
            message: '请选择医院图片'
          }
        ],
        res_image_ids: [
          {
            required: true,
            message: '请选择领取海报图片'
          }
        ],
        weex_links: [
          {
            required: true,
            message: '请填写安卓,IOS链接',
            trigger: 'blur'
          }
        ],
        mini_links: [
          {
            required: true,
            message: '请填写小程序链接',
            trigger: 'blur'
          }
        ],
        is_distribute: [
          {
            required: true,
            message: '请选择是否开启',
            trigger: 'blur'
          }
        ],
        rule_text: [
          {
            required: true,
            validator: rules,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    dates(val) {
      if (val) {
        this.disabled = true
      } else {
        this.disabled = false
      }
    },
    'form.is_end'(val) {
      if (val) {
        this.disabled1 = true
      } else {
        this.disabled1 = false
      }
    },
    'form.rule_text'(val) {
      if (val) {
        this.$refs.form.clearValidate('rule_text')
      } else {
        this.$refs.form.validateField('rule_text')
      }
    }
  },
  inject: ['reload'],
  created() {
    if (this.propid) {
      this.form = { ...this.firstForms }
      this.form['id'] = this.propid
      this.infos()
    }
  },
  methods: {
    infos() {
      this.form = { ...this.firstForms }
      // console.log('firstForm', this.firstForms)
      // console.log('one', this.form)
      // delete this.form.activity_name;
      this.form.activity_name = this.firstForms.activity_name
      this.dates = [this.form.start_time, this.form.end_time]
      if (this.form.bg_image_ids.length > 0) {
        this.form.bg_image_ids.forEach(i => {
          this.fileList1.push({
            url: localStorage.getItem('imgUrlPrefix') + i
          })
        })
      }
      if (this.form.res_image_ids.length > 0) {
        this.form.res_image_ids.forEach(i => {
          this.fileList2.push({
            url: localStorage.getItem('imgUrlPrefix') + i
          })
        })
      }
    },
    // 提交
    handleSubmit(form) {
      this.form.res_image_ids = this.$refs.uploadImg2.submitUpload()[0]
      this.form.bg_image_ids = this.$refs.uploadImg1.submitUpload()
      if (this.dates != null) {
        this.form.start_time = this.dates[0]
        this.form.end_time = this.dates[1]
        this.form.is_end = 0
      } else {
        this.form.start_time = null
        this.form.end_time = null
        this.form.is_end = 1
      }
      const oldData = {
        activity_name: this.form.activity_name,
        start_time: this.form.start_time,
        end_time: this.form.end_time,
        is_end: this.form.is_end,
        res_image_ids: JSON.stringify([this.form.res_image_ids]),
        bg_image_ids: JSON.stringify(this.form.bg_image_ids),
        rule_text: this.form.rule_text,
        weex_links: this.form.weex_links,
        mini_links: this.form.mini_links,
        is_distribute: this.form.is_distribute,
        distribute_gold_num: this.form.distribute_gold_num,
        distribute_silver_num: this.form.distribute_silver_num
      }
      const data = { ...oldData }
      if (this.propid) {
        data['act'] = '1'
        data['id'] = this.propid
      }
      // console.log("iddddd",data)
      this.$refs[form].validate(valid => {
        if (valid) {
          basicInfo(data).then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.form['id'] = res.data.data
              // console.log(res.data.data)
              // console.log('prize', this.title, String(res.data.data))
              this.$emit('prize', this.title, String(res.data.data))
              // this.form["ids"] = "second"
              // this.$emit('fatherMethod',this.form);
              // this.form.id = res.data.data;
              // this.form["title"] = this.title;
              // this.form = {};
              // console.log("res.data", res.data);
            } else {
              this.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
          })
        } else {
          this.$message({
            message: '有必填项没填，不能提交咯',
            type: 'warning'
          })
        }
      })
    }
    // 下一页
    // handleNext() {
    //   // this.val = this.form;
    //   this.form["title"] = this.title;
    //   this.$emit("prize", this.form);
    // }
  }
}
</script>
<style  scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.pclass{    margin-top: -5px;
    margin-bottom: 0;}
.spanclass{display:inline-block;width:146px;text-align: center;color: #bbb;margin-right: 8px;}
</style>
